<template>
  <div class="sop-table-wrap">
    <div class="card-head">
      <div class="search-rows">
        <el-button type="primary" size="small" v-hasPermi="['singleLabelrSOP:add']" @click="onNavigationTo('/single/sop/add-label')">
          <i class="el-icon-plus"></i>
          标签SOP
        </el-button>
        <el-select v-model="value" placeholder="企微标签" size="small">
          <el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="智能标签" size="small">
          <el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input class="search-input" size="small" placeholder="搜手机号" suffix-icon="el-icon-search"/>
      </div>
      <div class="flex-rows">
        <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
          <div slot="content">
            调用标签SOP模板创建自动触发规则<br/>后，给客户打上指定标签时，会自动<br/>创建指定SOP计划任务，支持按企微<br/>标签触发、按智能标签触发，客户标<br/>签变更不符合设置条件时，可自动终<br/>止SOP计划任务。
          </div>
          <span class="tolltip-text">标签SOP是什么？</span>
        </el-tooltip>
        <div class="check-box">
          <el-checkbox v-model="checked"/>
          <span>首次自动应用</span>
        </div>
        <el-tooltip class="item" effect="dark" placement="top" style="margin-right: 8px;">
          <div slot="content">开启后，首次登录本账号的企微号<br/>，登录成功5分钟后会自动应用列表中的<br/>所有配置。</div>
          <svg-icon icon-class="iquestion"/>
        </el-tooltip>
        <el-button type="warning" size="mini" @click="dialogVisible = true">应用配置</el-button>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="规则ID" width="120">
      </el-table-column>
      <el-table-column prop="date" label="触发方式">
      </el-table-column>
      <el-table-column prop="name" label="模板">
      </el-table-column>
      <el-table-column prop="name" label="创建时间">
      </el-table-column>
      <el-table-column prop="name" label="	最后操作时间">
      </el-table-column>
      <el-table-column prop="date" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" v-hasPermi="['singleLabelrSOP:mgt']">管理</el-button>
          <el-button type="text" size="small" v-hasPermi="['singleLabelrSOP:app']">应用</el-button>
          <el-button type="text" size="small" v-hasPermi="['singleLabelrSOP:edit']">编辑</el-button>
          <el-button type="text" size="small" v-hasPermi="['singleLabelrSOP:del']">删除</el-button>
        </template>
      </el-table-column>
      <template slot="empty">
        <TableEmpty/>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      taskList: [
        {value: '1', label: '创建中'},
        {value: '2', label: '下发中'},
        {value: '3', label: '下发完成'},
        {value: '6', label: '已取消'}
      ],
      accountList: [
        {value: '', label: '全部'},
        {value: '1', label: '员工1'},
        {value: '2', label: '员工2'},
        {value: '3', label: '员工3'}
      ],
      tableData: []
    }
  },
  methods: {
    onNavigationTo(path) {
      this.$router.push(path)
    },
  },
}
</script>
<style lang="scss" scoped>
.sop-table-wrap {
  background: #fff;
  width: 100%;

  .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;

    .search-rows {
      display: grid;
      column-gap: 8px;
      grid-template-columns: 126px 200px 200px 200px;
    }

    .flex-rows {
      display: flex;
      align-items: center;

      .tolltip-text {
        color: #3070ff;
        font-size: 14px;
        line-height: 22px;
      }

      .check-box {
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        line-height: 22px;

        span {
          padding-right: 8px;
          padding-left: 8px;
        }
      }
    }
  }
}
</style>
